<template>
  <div>
    <div v-if="'Select' === dictAssemblyType">
      <a-form-item :label="currFormItemLabel" :name="formItemName">
        <a-select :value="modelValue" :mode="dictSelectMode" optionFilterProp="title" show-search allowClear :placeholder="currPlaceholder" :style="{ ...coreStyle.width('100%') }" @change="dictValueSelectChange">
          <a-select-option v-for="item in dictValueSet" :value="item.codeName" :key="item.codeName" :title="item.displayName">
            {{ item.displayName }}
          </a-select-option>
        </a-select>
      </a-form-item>
    </div>
    <div v-if="'Radio' === dictAssemblyType">
      <a-form-item :label="currFormItemLabel" :name="formItemName">
        <a-radio-group :value="modelValue" @change="dictValueRadioChange">
          <a-radio-button v-for="item in dictValueSet" :value="item.codeName" :key="item.codeName">{{ item.displayName }}</a-radio-button>
        </a-radio-group>
      </a-form-item>
    </div>
    <div v-if="'Checkbox' === dictAssemblyType">
      <a-form-item :label="currFormItemLabel" :name="formItemName">
        <a-checkbox-group :value="modelValue" @change="dictValueCheckboxChange">
          <a-checkbox v-for="item in dictValueSet" :value="item.codeName" :key="item.codeName">{{ item.displayName }}</a-checkbox>
        </a-checkbox-group>
      </a-form-item>
    </div>
    <div v-if="'TreeSelect' === dictAssemblyType">
      <a-form-item :label="currFormItemLabel" :name="formItemName">
        <a-tree-select :value="modelValue" :tree-data="dictValueTreeData" :multiple="dictTreeSelectMultiple" treeNodeFilterProp="title" showSearch allowClear treeDefaultExpandAll :placeholder="currPlaceholder" :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" @change="dictValueTreeSelectChange">
        </a-tree-select>
      </a-form-item>
    </div>
    <div v-if="'SearchSelect' === dictAssemblyType">
      <a-select :value="modelValue" :mode="dictSelectMode" optionFilterProp="title" show-search allowClear :placeholder="currPlaceholder" :style="{ ...coreStyle.width('100%') }" @change="dictValueSelectChange">
        <a-select-option v-for="item in dictValueSet" :value="item.codeName" :key="item.codeName" :title="item.displayName">
          {{ item.displayName }}
        </a-select-option>
      </a-select>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

import { mapStores } from 'pinia'

import { useDictStore } from '/@/store/modules/cn/core/dict/dictStore'

import type { DictValue } from '/@/model/cn/core/dict/eo/DictValue'
import type { DictQO } from '/@/model/cn/core/dict/qo/DictQO'
import type { DictAndValueVO } from '/@/model/cn/core/dict/vo/DictAndValueVO'

export default defineComponent({
  name: 'Dict',
  props: {
    modelValue: [String, Array],
    dictKey: {
      type: String,
      required: true
    },
    formItemLabel: String,
    formItemName: {
      type: String,
      required: true
    },
    placeholder: {
      type: String
    }
  },
  emits: [
    'update:modelValue',
    'change'
  ],
  data() {
    return {
      dictAssemblyType: '',
      currFormItemLabel: '',
      dictValueSet: [],
      dictSelectMode: undefined,
      dictValueTreeData: [],
      dictTreeSelectMultiple: false,
      currPlaceholder: '请选择'
    }
  },
  computed: {
    ...mapStores(useDictStore),
  },
  methods: {
    dictValueSelectChange(value, option) {
      this.$emit('update:modelValue', value)
      this.$emit('change', value)
    },
    dictValueRadioChange(e) {
      this.$emit('update:modelValue', e.target.value)
      this.$emit('change', e.target.value)
    },
    dictValueCheckboxChange(checkedValue) {
      this.$emit('update:modelValue', checkedValue)
      this.$emit('change', checkedValue)
    },
    dictValueTreeSelectChange(value, label, extra) {
      this.$emit('update:modelValue', value)
      this.$emit('change', value)
    }
  },
  mounted() {
    if (this.formItemLabel) {
      this.currFormItemLabel = this.formItemLabel
    }
    if (this.placeholder) {
      this.currPlaceholder = this.placeholder
    }
    this.dictStore.getDictAndValueByDictKey(this.$toParam<DictQO>({ dictKey: this.dictKey } as DictQO)).then((res: Res<DictAndValueVO>) => {
      if (res.succ) {
        if (!this.formItemLabel) {
          this.currFormItemLabel = res.data[0].dict.dictName
        }
        if ('y' === res.data[0].dict.multipleChoice) {
          this.dictSelectMode = 'multiple'
          this.dictTreeSelectMultiple = true
        }
        if ('SearchSelect' === res.data[0].dict.assemblyType) {
          this.currPlaceholder = res.data[0].dict.dictName
        }
        this.dictValueSet = [ ...res.data[0].dictValue ]
        if ('tree' === res.data[0].dict.valueType && 'TreeSelect' === res.data[0].dict.assemblyType) {
          this.dictValueTreeData = [res.data[0].dictValueTreeData]
        }
        this.dictAssemblyType = res.data[0].dict.assemblyType
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }
})
</script>

<style scoped lang="less">

</style>
